<template>
    <div>
        <div class="card text-left mb-2" v-for="key in groupedData.keys">
            <div class="card-header">{{key}}</div>
            <div class="card-body">
                <template v-for="info in groupedData.data[key]">
                    <div class="form-inline mb-1 d-flex">
                        <label>{{formateDate(info.date)}}</label>
                        <i class="btn btn-sm material-icons ml-auto text-muted" @click="$emit('editExtendInfo', image, info)">edit</i>
                        <pre class="form-control-plaintext ml-2" style="word-break: break-all; white-space: pre-line;">{{info.content}}</pre> 
                    </div>
                    
                </template>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
import _ from "lodash"

export default {
    name: 'extend-info-list',
    props: {
        image: {
            type: Object,
            required: true
        }
    },
    computed: {
        
        groupedData() {
            var arr = this.image.extendInfo;
            var rs = _.orderBy(arr, ['date'], 'desc');
            rs = _.groupBy(rs, 'title');
            var keys = Object.keys(rs).sort(
                (a, b) => a > b ? 1 : a == b ? 0 : -1
            );
            return {
                keys,
                data: rs
            }
        }
    },
    methods: {
        
    }
}
</script>
<style type="text/css"></style>